<template>
  <div>
    <!-- 顶部功能区 -->
    <div class="top">
      <span class="icon-gengduo iconfont"></span>
      <van-search
          class="search"
          placeholder="甜蜜日常 是二智呀"
          shape="round"
          to="/search"
      />
      <span class="icon-maikefeng iconfont"></span>
    </div>
    <!-- 轮播图 -->
    <Carousel :bannersList="bannersList" class="Carousel"></Carousel>
    <!-- 滑动导航 -->
    <SlideNav></SlideNav>
    <!-- 推荐歌单 -->
    <div class="recommended-song-sheet">
      <div class="name" @click="() => {router.push('/b2/SongListClassIf')}">
        <span>推荐歌单</span>
        <span class="icon-xiangyoujiantou iconfont"></span>
      </div>
      <div class="icon-Androidgengduo_o iconfont"></div>
    </div>
    <div class="song-sheet-item">
      <SongSheetItem
          v-for="songSheetInfo in recommendedSongSheetList"
          :songSheetInfo="songSheetInfo"
          :imgUrl="songSheetInfo.coverImgUrl"
          :playcount="songSheetInfo.playCount"
          :name="songSheetInfo.name"
          @click="showSongSheet(songSheetInfo)"
          :key="songSheetInfo.id"
      ></SongSheetItem>
    </div>
    <!-- 热门歌手 -->
    <div class="recommended-song-sheet">
      <div class="name" @click="toSinger">
        <span>热门歌手</span>
        <span class="icon-xiangyoujiantou iconfont"></span>
      </div>
      <div class="icon-Androidgengduo_o iconfont"></div>
    </div>
    <div class="song-sheet-item">
      <SingerItem v-for="singer in hotSinger" :imgUrl="singer.img1v1Url" :name="singer.name" :key="singer.id"
                  @click="showSingerInfo(singer.id)"></SingerItem>
    </div>

  </div>
</template>


<script setup>
import {computed, onMounted} from "vue";
import SlideNav from "../../components/find/SlideNav.vue";
import store from "../../store/index.js";
import router from "../../router/index.js";

// 每日推荐歌单列表
const recommendedSongSheetList = computed(() => store.state.find.recommendedSongSheetList);
// 背景图列表
const bannersList = computed(() => store.state.find.bannerList);
// 热门歌手列表
const hotSinger = computed(() => store.state.find.hotSingerList);

// 点击歌单显示歌单信息及对应歌曲
const showSongSheet = (songSheetInfo) => {
  store.commit("setSongSheetInfo", songSheetInfo);
  router.push(`/b2/songsheet/${songSheetInfo.id}`)
};

// 展示歌手信息页面
const showSingerInfo = (id) => {
  // 路由跳转 /singer
  router.push({path: `/b2/singerdetail/${id}`})
}
// 跳转歌手列表页
const toSinger = () => {
  router.push('/b2/singer')
}

onMounted(() => {
  // 轮播图数据
  if (store.state.find.bannerList.length === 0) {
    store.dispatch("getBanner");
  }
  // 每日推荐歌单列表
  if (store.state.find.recommendedSongSheetList.length === 0) {
    store.dispatch("getEverydayRecommendedSongSheet");
  }
  // 首页热门歌手列表
  if (store.state.find.hotSingerList.length === 0) {
    store.dispatch("getHotSingerList");
  }
  // 滚动高度
  if (store.state.index.scrolls['/find'] !== 0) {
    document.querySelector('.need-scroll').scrollTop = store.state.index.scrolls['/find'];
  }

});

</script>


<style scoped lang="scss">
.top {
  position: fixed;
  display: flex;
  top: 0;
  align-items: center;
  padding: 0 10px;
  z-index: 3;
  background: #fff;
  width: 100%;

  .search {
    flex: 1;
  }
}

.Carousel {
  margin-top: 54px;
  min-height: 156px;
}

.recommended-song-sheet {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .name {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 550;

    .iconfont {
      font-weight: bold;
      //color: #000;
      padding-left: 5px;
      font-size: 14px;
    }
  }
}

.song-sheet-item {
  overflow: scroll;
  margin: 0 10px;
  display: flex;
  font-size: 12px;
}
</style>
